<template>
    <div class="index_box">
        <router-view></router-view>
    </div>
    <div class="myindex">
        <footer>
            <router-link to="/myindex/detail"><span></span> 首页</router-link>
            <router-link to="/myindex/classify"><span></span> 分类</router-link>
            <router-link to="/myindex/shoppingcart"><span></span> 购物车</router-link>
            <router-link to="/myindex/mypage"><span></span> 我的</router-link>
        </footer>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.myindex {
    footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 3.4375rem;
        background-color: rgb(255, 255, 255);
        box-sizing: border-box;
        border-top: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        a {
            display: flex;
            flex-direction: column;
            width: 25%;
            height: 3rem;
            justify-content: space-evenly;
            align-items: center;
            font-size: 0.75rem;
        }
        a:nth-child(1) {
            &.router-link-active {
                color: #ff5154;
                span {
                    width: 1.625rem;
                    height: 1.625rem;
                    background: url(../assets/index_active.png);
                    background-size: cover;
                }
            }
        }
        a:nth-child(2) {
            &.router-link-exact-active {
                color: #ff5154;
                span {
                    width: 1.625rem;
                    height: 1.625rem;
                    background: url(../assets/classify_active.png);
                    background-size: cover;
                }
            }
        }
        a:nth-child(3) {
            &.router-link-exact-active {
                color: #ff5154;
                span {
                    width: 1.625rem;
                    height: 1.625rem;
                    background-image: url(@/assets/cart_active.png);
                    background-size: cover;
                }
            }
        }
        a:nth-child(4) {
            &.router-link-exact-active {
                color: #ff5154;
                span {
                    width: 1.625rem;
                    height: 1.625rem;
                    background-image: url(@/assets/mine_active.png);
                    background-size: cover;
                }
            }
        }
        a:nth-child(1) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.625rem;
            height: 1.625rem;
            background-image: url(@/assets/index.png);
            background-size: cover;
        }
        a:nth-child(2) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.625rem;
            height: 1.625rem;
            background-image: url(@/assets/classify.png);
            background-size: cover;
        }
        a:nth-child(3) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.625rem;
            height: 1.625rem;
            background-image: url(@/assets/cart.png);
            background-size: cover;
        }
        a:nth-child(4) span {
            box-sizing: border-box;
            margin-bottom: 0.1875rem;
            width: 1.625rem;
            height: 1.625rem;
            background-image: url(@/assets/mine.png);
            background-size: cover;
        }
    }
}
</style>
